import React from 'react'
import myUiImgUrl from '../assets/myUi.png'
import sharkImgUrl from '../assets/shark.png'
import moneyImgUrl from '../assets/money.png'
import wxBlogImgUrl from '../assets/wx-blog.png'
import tgImgUrl from '../assets/tg.png'
import aliImgUrl from '../assets/aliyun.png'
import translationImgUrl from '../assets/translation.png'
import cliImgUrl from '../assets/cli.png'
import myWebsiteImgUrl from '../assets/myWebsite.png'
import PikachuImgUrl from '../assets/pikachu.png'
import ItemWrapper from './ItemWrapper'



const createItemContent = () => {
    return [
        {
            title: '阿里云 (React)',
            imgUrl: aliImgUrl,
            codeUrl: '#',
            previewUrl: '#',
            children: <ItemWrapper>
                <>
                    <p>涉及公司隐私，所以不对技术栈和技术点进行描述,避免不必要的纠纷(见谅)</p>
                    <p>帮助小伙伴解决开发中遇到的问题,对实习生进行培训</p>
                    <p>针对项目开发专属的工具包,提高小伙伴的开发效率</p>
                    <p>找出项目中存在的问题,并给出建议和优化方案</p>
                    <p>负责完成日常需求，bug修复,优化代码,及时发现存在问题的代码进行重构,避免增加后期开发成本</p>
                </>
            </ItemWrapper>
        },
        {
            title: 'xxx-项目-helper (node)',
            imgUrl: cliImgUrl,
            codeUrl: '#',
            previewUrl: '#',
            children: <ItemWrapper style={{ marginBottom: 6 }}>
                <>
                    <p>一个node工具包,将前端开发中的重复环节用指令完成。</p>
                    <p>
                        涉及业务和工作流程,在公司未允许的情况下不便展示,以上图片用于示意,与真实项目无关。
                    </p>
                </>
            </ItemWrapper>
        },
        {
            title: '个人网站 (NextJs)',
            imgUrl: myWebsiteImgUrl,
            codeUrl: 'https://gitee.com/xiong-jingsong/nextjs-typeorm-web',
            previewUrl: 'http://118.31.67.126/',
            children: <ItemWrapper>
                <>
                    <p>自己的个人网站,目前有<strong>游戏</strong>｜<strong>评论</strong>｜<strong>登陆注册</strong>等功能</p>
                    <p>这是一个使用<strong>NextJs</strong>开发的网站</p>
                    <p>使用到的技术有<strong>NextJs</strong>｜<strong>typeORM</strong>｜<strong>PostgreSQL</strong>｜<strong>Docker</strong>｜<strong>Nginx</strong>｜<strong>SSR</strong>｜<strong>SSG</strong>｜<strong>BSR</strong></p>
                    <p>NextJs特别适合初创公司或个人开发者,前端页面/后端接口都由一个开发者写,开发效率真的高！</p>
                </>
            </ItemWrapper>
        },
        {
            title: '旺财记账 (React)',
            imgUrl: moneyImgUrl,
            codeUrl: 'https://gitee.com/xiong-jingsong/money-react-ts',
            previewUrl: 'http://xiong-jingsong.gitee.io/money-website',
            children: <ItemWrapper>
                <>
                    <p>这是我的个人项目,早期用来熟悉React Hooks</p>
                    <p>
                        该项目使用 <strong>React Hooks</strong>｜<strong>TypeScript</strong>涉及常用Api <strong>useState</strong>
                        ｜<strong>useMemo</strong>｜<strong>useEffect</strong>｜<strong>useRef</strong>｜<strong>
                            自定义Hook
                        </strong>｜<strong>React Router</strong>等。
                    </p>
                    <p>
                        让我对Hooks 有了深刻的理解和应用。并且对常用hook api 进行总结，已发布相关博客。
                    </p>
                </>
            </ItemWrapper>
        },
        {
            title: 'telegram机器人 (Python)',
            imgUrl: tgImgUrl,
            codeUrl: '#',
            previewUrl: 'https://aslan-alt.github.io/wxApplets-video/',
            children: <ItemWrapper>
                <>
                    <p>
                        一个<strong>Python</strong>开发的程序，通过telegram官方提供的api,以及python的多个第三方库实现。
                    </p>
                    <p>该机器人可以自动爬取关键数据定时发布更新运营报表。</p>
                    <p> 管理人员可通过指令对其后台页面进行用户信息查看,修改等一些列<strong>自动化</strong>操作。</p>
                    <p> 自动填写excel表格以及对web端重复的劳动都可通过机器人关键指令完成，发现后台异常，发送相关管理人员</p>
                </>
            </ItemWrapper>
        },
        {
            title: 'My UI (Vue轮子)',
            imgUrl: myUiImgUrl,
            codeUrl: 'https://gitee.com/xiong-jingsong/Vue-gulu',
            previewUrl: 'http://xiong-jingsong.gitee.io/my-ui/components/button.html',
            children: <ItemWrapper>
                <>
                    <p>一款基于 <strong>Vue2</strong> 完成的 UI 组件库,也是我人生中第一套轮子。</p>
                    <p>目前提供<strong>Button</strong>｜<strong>Grid</strong>｜<strong>Input</strong>｜<strong>Toast</strong>｜<strong>Layout</strong>等常用组件，后期还会更新vue3版本。</p>
                    <p>制作过程让我对<strong>单元测试</strong>有了新的认识。</p>
                </>
            </ItemWrapper>
        },
        {
            title: '鲨鱼记账 (Vue)',
            imgUrl: sharkImgUrl,
            codeUrl: 'https://gitee.com/xiong-jingsong/shark-ts-code',
            previewUrl: 'http://xiong-jingsong.gitee.io/shark-website/',
            children: <ItemWrapper>
                <>
                    <p>这是一个基于 <strong>Vue</strong> 和 <strong>TypeScript</strong> 的单页面应用。</p>
                    <p>
                        该项目通过<strong>localStorage</strong>实现用户数据的存储，从而达到离线也可以正常记账，有用到<strong>ECharts</strong>
                        ｜<strong>Vuex</strong>｜<strong>VueRouter</strong>,所有的图标均使用<strong>SVG</strong>,统计图使用<strong>ECharts</strong>完成,用户填入实际支出与消费即可自动生成对应的统计图表。
                    </p>
                </>
            </ItemWrapper>
        },

        {
            title: '在线博客 (小程序)',
            imgUrl: wxBlogImgUrl,
            codeUrl: 'https://gitee.com/xiong-jingsong/wx-blog/tree/master',
            previewUrl: 'https://aslan-alt.github.io/wxApplets-video/',
            children: <ItemWrapper>
                <>
                    <p>
                        一款微信<strong>小程序应用</strong>，使用微信原生框架完成。
                    </p>
                    <p>
                        功能有：<strong>登陆</strong>｜<strong>注册</strong>｜<strong>注销登陆</strong>博客的<strong>增</strong>
                        ｜<strong>删</strong>｜<strong>改</strong>｜<strong>查</strong>，也有使用到小程序的第三方的UI库。
                    </p>
                    <p>
                        由于发布上线需要相关资质，所以并未发布上线，
                    </p>
                </>
            </ItemWrapper>
        },
        {
            title: '翻译工具包 (node包)',
            imgUrl: translationImgUrl,
            codeUrl: 'https://github.com/aslan-alt/baidu-translation',
            previewUrl: 'https://www.npmjs.com/package/aslan-translation',
            children: <ItemWrapper>
                <>
                    <p>一个node工具包,调用baidu提供的接口,用命令行获得翻译结果</p>
                    <p>在日常开发中我们经常要用到翻译软件，所以省去打开浏览器的时间。</p>
                </>
            </ItemWrapper>
        },
        {
            title: '会动的皮卡丘 (CSS)',
            imgUrl: PikachuImgUrl,
            codeUrl: 'https://gitee.com/xiong-jingsong/pikachu-code',
            previewUrl: 'http://xiong-jingsong.gitee.io/pikachu-website/',
            children: <ItemWrapper>
                <>
                    <p>这是我在学习 CSS3和动画 时制作的一个作品。</p>
                    <p>代码和动画同步进行，希望您喜欢。</p>
                </>
            </ItemWrapper>
        }
    ]

}

export {
    createItemContent
}
